<template>
	<div class="userOrder">
		<header class="userOrder-header">
             <router-view></router-view> 
             <router-link to="/user" tag="i">
             </router-link> 
            <span>推荐有奖</span>
        </header>
        <nav class="userOrder-nav">
            <h3 :class="{'classActive':type=='al'}" @click="all1"> 推荐有奖</h3>
            <h3 :class="{'classActive':type=='pa'}" @click="paying1"> 邀请码兑换</h3>
        </nav>
        <div class="items" v-if="type=='al'">
            
        </div>
        <div class="items1" v-if="type=='pa'">
            <div class="invite">
                <input type="text" placeholder="主人,在这里输入邀请码哦~"/> 
                <button>确认</button>
            </div>
        </div>
	</div>
</template>

<script>
export default{
    data:function(){
        return {
            type:"al"
        }
    },
    methods: {
        all1() {
            this.type = "al";
        },
        paying1() {
            this.type = "pa";
        }
    }
}
</script>

<style scoped>
@import "../../static/css/base.css";
.classActive{
    color: yellowgreen;
    padding-bottom: .2rem;
    border-bottom: 2px solid yellowgreen;
}

.userOrder{
    width: 100%;
    height: 100vh;
    font-size: .15rem;
}
.userOrder-header{
    width:100%;
    height: 0.65rem;
    font-size:.25rem;
    display: flex;
    align-items:center;
}

.userOrder-header i{
    width: .5rem;
    height: .7rem;
    background: url(../../static/img3/zuo.png) no-repeat .15rem center;
    background-size: 50%;
}

.userOrder-header span{
    padding-left: 32%;
}
.userOrder-nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding:.19rem 0;
}
h3{
    font-style: normal;
}
.items{
    background: url(http://pic10.cdn.3songshu.com:81//assets/upload/article/d50a70dee2bdec00f48c5ecdf8a8c6fb.jpg) no-repeat center .1rem;
    background-size:100%;
    background-color:rgb(248,248,248);
    width:100%;
    height: 100vh;
}
.items1{
    background: rgb(248,248,248);
    width:100%;
    height: 100vh;
}
.invite{
    height: 2rem;
    width: 100%;
    padding:0 .2rem .2rem .2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.invite input{
    width:100%;
    height: .5rem;
    background: white;
    outline: none;
    border: none; 
    font-size: .2rem;
    border-radius: 3px;
    text-indent: 10px;
}
.invite button{
    outline: none;
    border: none;
    background: rgb(200,200,200);
    font-size: .3rem;
    width:100%;
    height: .6rem;
    color: white;
    border-radius: 3px;   
}
</style>